<template>
  <view class="remark-card">
    <view class="card-item">
      <uni-card
        :is-shadow="true"
        note="true"
      >
        <view class="header">
          <view class="header-user">
            <view class="user-icon" @click="handleClickIcon(item.userId)" catchTap="catchTap">
              <image :src="item.icon" mode="aspectFill" />
            </view>
            <view class="user-name">
              <text>{{item.username}}</text>
            </view>
          </view>
          <view class="header-time">
            {{item.createTime}}
          </view>
        </view>
        <view class="content">
          <view class="food-photo">
            <image :src="item.photo[0]" mode="aspectFill" />
          </view>
          <view class="food-info">
            <view class="food-name">{{item.foodName}}</view>
            <view>
              <uni-rate :readonly="true" size="14" v-model="item.score" />
            </view>
            <view class="food-address">坐标：{{item.schoolName}}{{item.address}}</view>
            <view class="food-description">评价：{{item.comments}}</view>
          </view>
        </view>
        <template v-slot:footer>
            <view class="footer-box">
                <view  @click="addLikes">
                  <view v-if="item.isAdmired===0" class="footer-item">
                    <view class="like-icon icon icondianzan2"></view>
                    <view class="footer-num">{{item.dianZanNum}}</view>
                  </view>
                  <view  v-else class="footer-item">
                    <view class="like-icon icon iconz-likeFill"></view>
                    <view class="footer-num">{{item.dianZanNum}}</view>
                  </view>
                </view>
                <view  class="footer-item" @click="addComments">
                  <view class="message-icon icon iconwei-"></view>
                  <view class="footer-num">{{item.pingLunNum}}</view>
                </view>
                <!-- <view>分享</view> -->
            </view>
        </template>
      </uni-card>
    </view>
  </view>
</template>

<script>
import {uniCard, uniIcons, uniRate} from '@dcloudio/uni-ui'
export default {
  name: 'remark-card',
  components: {
    uniCard, uniIcons, uniRate
  },
  props: [
    'item'
  ],
  mounted() {
  },
  data() {
    return {
      currentPage: ''
    }
  },
  methods: {
    addLikes () {
      this.$emit('addLikes')
    },
    addComments() {
      this.$emit('addComments')
	  },
  handleClickIcon(userId) {
    // console.log(event)
    // event.stopPropagation();
    const app = getApp();   //获取应用实例
    this.currentPage = app.getCurrentPages()
    console.log('当前页面是', this.currentPage)
    if(this.currentPage === 'pages/share/index') {
      uni.navigateTo({
        url: '/pages/mine/myRemark?remarkMasterId='+userId
      })
    }
  },
	},
}
</script>

<style lang='scss'>
.remark-card {
  .card-item {
    .header {
      display: flex;
      justify-content: space-between;
      .header-user {
        display: flex;
        .user-icon {
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          border-radius: 20px;
          overflow: hidden;
          image {
              height: 100%;
              width: 100%;
          }
        }
        .user-name {
					font-size: 16px;
					color: #333;
          line-height: 40px;
          padding-left: 20px;
        }
      }
      .header-time {
        font-size: 12px;
        color: #999;
        line-height: 40px;
      }
    }
    .content {
      display: flex;
      .food-photo {
        flex: 1;
        box-sizing: border-box;
        padding: 5px;
        padding-top: 10px;
        image {
          height: 100%;
          width: 100%;
          border-radius: 10px;
        }
      }
      .food-info {
        flex: 2;
        box-sizing: border-box;
        padding: 10px;
        padding-right: 5px;
        .food-name {
          font-size: 16px;
          color: #333333;
          padding-bottom: 10px;
        }
		.food-address {
          font-size: 14px;
          padding: 10px 0;
          color: #666666;
        }
        .food-description {
          padding-bottom: 10px;
          font-size: 12px;
          color: #999999;
        }
      }
    }
    .footer-box {
      display: flex;
      justify-content: space-around;
      .footer-item {
        display: flex;
        .like-icon {
          color: $theme-color
        }
        .message-icon {
          color: $theme-color
        }
        .footer-num {
          margin-left: 10px;
          line-height: 18px;
          color: #999;
          vertical-align: middle;
        }
      }
    }
  }
}
  /* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
</style>
